<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/info-list.css"/><!--资讯列表-->
    <link rel="stylesheet" href="../../css/report-list.css"/><!--研报列表-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>搜索</title>
    <style>

        em {
            color: #2C68FF;
            font-style: initial;
        }

        .index-search-wrap {
            padding: 0 .32rem;
            background: rgba(255, 255, 255, 1);
        }

        .index-search-box {
            margin-bottom: .12rem;
            margin-top: .12rem;
        }

        .index-search-img {
            width: 7.5rem;
            height: 3rem;
        }

        .index-search-img img {
            width: 100%;
            height: 100%;
        }

        .index-search-search {
            height: .64rem;
            width: 6.08rem;
            border-radius: .08rem;
            background: rgba(245, 245, 245, 1);
        }

        .index-search-icon {
            margin-left: .24rem;
            color: rgba(159, 159, 159, 1);
        }

        .index-search-sc {
            color: rgba(159, 159, 159, 1);
            height: .64rem;
            width: .92rem;
            line-height: .64rem;
            margin: auto;
            text-align: center;
        }


        .index-search-search i {
            margin-right: .26rem;
        }

        .index-search-search input {
            margin-left: .14rem;
            line-height: .6rem;
        }

        input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

        .index-search-cancle {
            color: rgba(44, 104, 255, 1);
        }



        .featured-video-item {
            padding: 16px 0;
            border-bottom: 1px solid #f6f6f6;
        }

        .featured-video-item-img-wrap {
            position: relative;
            width: 2.8rem;
            height: 1.6rem;
        }

        .featured-video-item-img {
            width: 2.8rem;
            height: 1.6rem;
        }

        .featured-video-item-img img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }

        .featured-video-item-time {
            position: absolute;
            top: 1.2rem;
            right: 0.1rem;
        }

        .featured-video-item-time div {
            background-color: rgba(0, 0, 0, 0.25);
            color: rgba(255, 255, 255, 0.8);
            padding: 1px 4px;
        }


        .comp-market-list {
            padding: 0 .32rem;
        }

        .comp-market-item {
            height: .96rem;
            border-bottom: solid 1px #f6f6f6;
            line-height: .36rem;
        }
        .comp-market-base {
            color:rgba(34,34,34,1);
            margin-right: .6rem;
        }

        .comp-market-per {
            width: 1.64rem;
            text-align: right;
        }
        .comp-market-perrose {
            color: rgba(239, 66, 68, 1);
        }

        .comp-market-perfall {
            color: rgba(22, 178, 112, 1);
        }
        .comp-market-address {
            width:.38rem;
            height:.24rem;
            line-height: .24rem;
            border-radius:2px;
            text-align: center;
        }
        .comp-market-addressSZ {
            background:rgba(78,126,244,1);
            color:rgba(255,255,255,1);
        }
        .comp-market-addressSH {
            background:rgba(239,66,68,1);
            color:rgba(255,255,255,1);
        }
        .comp-market-code {
            color:rgba(34,34,34,0.6);
            line-height: .32rem;
            margin-left: .06rem;
        }


    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">

    <!--状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div id="mescroll" class="flex-1 mescroll">
        <div class="comp-market-list bg-white"></div>
    </div>

</div>

</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let meScroll
  let pm = {
    lastDttm: DateUtils.getNowInt(),
    pageNum: 1,
    pageSize: 20,
    keyWord: '',
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    pm.keyWord = decodeURIComponent(params.key)

    jsBridge.callBridge('setTitle', {title: params.title})
    $('.center-bar').html(params.title)

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: reLoadPage, //下拉刷新入口
      upCallback: goSearch //滚动加载入口
    })

  }

  function reLoadPage() {
    pm.pageNum = 1
    pm.lastDttm = DateUtils.getNowInt()

    goSearch()
  }

  //搜索入口
  function goSearch() {
    Server.searchMarket.getSecuritiesInfo({
      keyWords: pm.keyWord,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize,
      ticket: 'info_pc',
      //markets: ['SH', 'SZ']
    }).then(function (data) {
      let htmlStr = '', len = 0
      let map = {}
      //处理涨跌幅，方便取数
      if (data.quoteInfo && data.quoteInfo.length > 0) {
        data.quoteInfo.forEach(function (item) {
          map[item.uniqueCode] = item
        })
      }

      if (data.securitiesInfo && data.securitiesInfo.length > 0) {
        len = data.securitiesInfo.length
        data.securitiesInfo.forEach(function (item) {
          let obj = item.uniqueCode.split('-')
          //处理涨跌幅
          let raisePercent
          if (map[item.uniqueCode] && map[item.uniqueCode].raisePercent) {
            if (map[item.uniqueCode].raisePercent > 0) {
              raisePercent = '+' + Utils.numberFormat(map[item.uniqueCode].raisePercent * 100, 1) + '%'
            } else if (map[item.uniqueCode].raisePercent < 0) {
              raisePercent = Utils.numberFormat(map[item.uniqueCode].raisePercent * 100, 1) + '%'
            }
          } else {
            raisePercent = '-'
          }
          //处理涨跌幅颜色样式
          let lclass = ''
          if (map[item.uniqueCode] && map[item.uniqueCode].raisePercent) {
            if (map[item.uniqueCode].raisePercent > 0) {
              lclass = 'comp-market-perrose'
            } else if (map[item.uniqueCode].raisePercent < 0) {
              lclass = 'comp-market-perfall'
            }
          }
          //处理最新价
          let lastPrice = map[item.uniqueCode] && map[item.uniqueCode].lastPrice ? Utils.numberFormat(map[item.uniqueCode].lastPrice) : '-'
          htmlStr +=
                '<div class="flex-row justify-content-between align-items-center comp-market-item" onclick="jumpStock(\'' + item.uniqueCode + '\')">\n' +
                '                        <div class="flex-column">\n' +
                '                            <div class="fs13">' + Utils.dealKeyWord(item.name, pm.keyWord) + '</div>\n' +
                '                            <div class="flex-row align-items-center">\n' +
                '                                <div class="comp-market-address comp-market-addressSZ ff400 fs10">' + obj[0] + '</div>\n' +
                '                                <div class="comp-market-code ff400 fs11">' + Utils.dealKeyWord(item.code, pm.keyWord) + '</div>\n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '                        <div class="flex-row">\n' +
                '                            <div class="comp-market-base fs14 ff600">' + lastPrice + '</div>\n' +
                '                            <div class="comp-market-per ' + lclass + ' fs14 ff600">' + raisePercent + '</div>\n' +
                '                        </div>\n' +
                '                    </div>'
        })

        if (pm.pageNum === 1) {
          $('.comp-market-list').html(htmlStr)
        } else {
          $('.comp-market-list').append(htmlStr)
        }
      }

      pm.pageNum ++

      //下拉刷新结束回调
      meScroll.endSuccess(len, len === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })

    //搜索词缓存
    if (pm.keyWord) {
      Template.searchWordCache(pm.keyWord)
    }
  }

  // 股票跳转 TODO
  function jumpStock(stockCode) {
    let obj = stockCode.split('-')
    goWordDetail({type: 6, exchange: obj[0], stockCode: obj[1]})
  }

</script>
</html>
